<template>
  <div class="box" @click="pageName==='policyDocument'?goToPolicyDetail(configData.policyBase.id,configData.id):goToDetail(configData.enterpriseName,configData.id)">
    <!-- <div class="left"></div> -->
    <div class="center">
      <div class="name" v-if="pageName==='policyDocument'">{{configData.policyBase&&(configData.policyBase.name.length<20?configData.policyBase.name:(configData.policyBase.name.substr(0,19)+"..."))}}</div>
      <div class="name" v-if="pageName!=='policyDocument'">{{configData.enterpriseName.length<16?configData.enterpriseName:(configData.enterpriseName.substr(0,15)+"...")}}</div>
      <div class="button" v-if="pageName==='questionBank'">
        <van-button @click.stop="follow(configData.enterpriseName,configData.id)" v-if="configData.state!=2" class="btn" size="mini" type="info" round plain>跟进</van-button>
      </div>
      <div class="button" v-if="pageName==='visitRecord'">
        <van-button @click.stop="confirm(configData.enterpriseName)" v-if="configData.state==0" class="btn" size="small" type="info" round plain>提交</van-button>
        <van-button @click.stop="questionReport(configData.enterpriseName)" v-if="configData.state==1" class="btn" size="small" type="info" round plain>问题填报</van-button>
        <!-- <van-button v-if="configData.state==1" class="btn" size="small" type="info" round plain>完成</van-button> -->
      </div>
      <!-- 政策文件 -->
      <div class="leftBottom" v-if="pageName==='policyDocument'">{{configData.policyBase&&(configData.policyBase.remark.length<15?configData.policyBase.remark:(configData.policyBase.remark.substr(0,14)+"...")) || '政策描述'}}</div>
    </div>
    <div class="right">
      <div class="notRead" v-if="pageName==='policyDocument'&&configData.isRead==1"></div>
      <!-- 问题库 -->
      <div
        class="first-div"
        v-if="pageName==='questionBank'"
      >{{configData.state==2?'完成':'跟进中'}}</div>
      <div v-if="pageName==='questionBank'" class="question-tag">{{configData.tag}}</div>
      <div v-if="pageName==='questionBank'||'visitRecord'" class="question-parkName">{{configData.basicName||'园区外'}}</div>
      <div v-if="pageName==='questionBank'||'visitRecord'" class="question-registeredAddress" style="width:230px">{{configData.registeredAddress&&(configData.registeredAddress.length<37?configData.registeredAddress:(configData.registeredAddress.substr(0,35)+"..."))||''}}</div>
      <!-- 走访记录 -->
      <div class="first-div" v-if="configData.state==2&&pageName=='visitRecord'">完成</div>
      <div class="time">{{configData.insertTime}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    pageName: {
      type: String,
      default: "visitRecord",
    },
    configData: {
      type: Object,
      default: () => {
        return { state: 0 }
      },
    },
  },
  created() {},
  methods: {
    goToDetail(enterpriseName,id){
      this.$emit('goToDetail',enterpriseName,id)
    },
    // 政策文件详情
    goToPolicyDetail(policyBaseId,id){
      this.$emit('goToPolicyDetail',policyBaseId,id)
    },
    follow(enterpriseName,id){
      this.$emit('follow',enterpriseName,id)
    },
    confirm(enterpriseName){
      this.$emit('confirm',enterpriseName)
    },
    questionReport(enterpriseName){
      this.$emit('questionReport',enterpriseName)
    }
  },
};
</script>

<style scoped lang="less">
.box {
  position: relative;
  margin: 10px;
  padding: 20px;
  background: #ffffff;
  border-radius: 15px;
  height: 100px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.left {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(0,0,0,0);
}
.name {
  position: absolute;
  left: 20px;
  top: 20px;
}
.right .first-div {
  position: absolute;
  right: 20px;
  top: 20px;
}
.time {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.center .button {
  position: absolute;
  left: 30px;
  bottom: 15px;
}
.leftBottom {
  position: absolute;
  left: 20px;
  bottom: 20px;
  color:#999;
  font-size:12px;
}
.time{
  position: absolute;
  right: 16px;
  bottom: 20px;
  color:#333;
  font-size:14px;
}
.btn {
  padding: 0 20px;
}
.question-tag{
  position: absolute;
  right: 20px;
  top: 50px;
  font-size: 12px;
  color: #fff;
  background: rgb(248, 92, 92);
  padding: 3px 5px;
  border-radius: 3px;
}
.notRead{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(243, 65, 65);
  position: absolute;
  top: 20px;
  right: 20px;
}
.question-parkName{
  position: absolute;
  top: 47px;
  font-size: 12px;
  color: #333;
}
.question-registeredAddress{
  position: absolute;
  top: 67px;
  font-size: 10px;
  color: #333;
}
</style>
